<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>36-tab选项卡</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .box{
            width:400px;
            height:298px;
            border:1px solid #000;
            margin:50px auto;
        }
        .box ul>li{
            list-style:none;
            float:left;
        }
        .nav>li{
            list-style:none;
            width:100px;
            height:50px;
            background:orange;
            text-align:center;
            line-height:50px;
        }
        .nav .current{
            background-color:#ccc;
        }
        .box .content>li{
            list-style:none;
            display:none;
        }
        .box .content>.show{
            display:block;
        }
        .content>.show img{
            width:400px;
            height:250px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="nav">
            <li class="current">H5+C3</li>
            <li>jQuery</li>
            <li>C语言</li>
            <li>Go语言</li>
        </ul>
        <ul class="content">
            <li class="show"><img src="imgs/1.jpg" alt=""></li>
            <li><img src="imgs/480232516950425702.jpg" alt=""></li>
            <li><img src="imgs/79054224629041067.jpg" alt=""></li>
            <li><img src="imgs/79054241808948996.jpg" alt=""></li>
        </ul>
    </div>

    <script src="./js/jquery-1.12.4.js"></script>
    <script>
      $(function(){
        //   $('.nav>li').mouseenter(function(){
        //       //1.给当前选中的选项添加背景色
        //       $(this).addClass('current')
        //       //2.找到当前选项的索引
        //       var index = $(this).index()
        //       //3.找到对应图片
        //       var $li = $('.content>li').eq(index)
        //       //4.替换图片
        //       $li.addClass('show')
        //   })
        //   $('.nav>li').mouseleave(function(){
        //       //1.还原对应选项的背景色
        //       $(this).removeClass('current')
        //       //2.找到当前索引
        //       var index = $(this).index()
        //       //3.找到对应图片
        //       var $li = $('.content>li').eq(index)
        //       //3.还原图片
        //       $li.removeClass('show')
        //   })
        $('.nav>li').mouseenter(function(){
            //1.给当前选中的选项添加背景色
            $(this).addClass('current')
            //2.给其他未选中的选项移出背景色
            $(this).siblings().removeClass('current')
            //3.找到当前索引
            var index = $(this).index()
            //4.找到对应图片
            var $li = $('.content>li').eq(index)
            //5.更换图片
            $li.addClass('show')
            //6.隐藏其他未选中的图片
            $li.siblings().removeClass('show')
        })
      })
    </script>
</body>
</html>